<script setup lang="ts">
  import { FormInstance } from 'element-plus'
  import { computed, ref } from 'vue'
  import { useUpdateBaishiOrderStatus } from '@/services/pages/order/useOrder'
  import { HMessage, HMessageBox } from '@/components/common/message'

  const { updateForm, updateLoading, update, resetForm } = useUpdateBaishiOrderStatus()

  const props = defineProps({
    orderId: {
      type: String,
      required: true,
    },
    hckWbtype: {
      type: String,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  // 弹窗显示状态
  const visible = defineModel('modelValue', { type: Boolean, default: false })

  // 表单校验规则
  const rules = computed(() => {
    return {
      orderStatus: { required: true, message: '请选择百事完工类型', trigger: ['change', 'blur'] },
      orderStatusNode: {
        required: [1, 3].includes(updateForm.value.orderStatus),
        message: updateForm.value.orderStatus === 1 ? '请选择线上完工类型' : '请选择销单原因',
        trigger: ['change', 'blur'],
      },
      orderStatusNodeCode: {
        required: updateForm.value.orderStatus === 4,
        message: '请选择建议报废原因',
        trigger: ['change', 'blur'],
      },
    }
  })

  // 建议报废原因下拉选项
  const suggestReasonOfScrapOptions = [
    { label: '出保且制冷系统损坏无法修复', value: 'Refrigeration Damaged' },
    { label: '出保且冰箱箱体开裂或变形，无法修复', value: 'Box Cracked' },
    { label: '出保且外观损坏无法修复', value: 'Appearance Damage' },
    { label: '水淹或人为损坏不具有维修价值', value: 'No Maintenance Value' },
    { label: '烧毁或破损严重无法修复', value: 'Irreparable' },
  ]

  // 线上完工类型下拉选项
  const onLineCompletionTypeOpionts = [{ label: '在线完工', value: 'Completion' }]

  // 销单原因类型下拉选项
  const reasonOfDestoryOrderOptions = [
    { label: '客户原因传', value: 'Customer Reason' },
    { label: '客观原因传', value: 'Objective Reason' },
  ]

  // 表单组件实例
  const formInstance = ref<FormInstance | null>(null)

  /**
   * 取消事件
   */
  const hideDialog = () => {
    resetForm()
    visible.value = false
  }

  /**
   * 保存事件
   */
  const onSave = async () => {
    if (!formInstance.value) {
      return
    }

    try {
      await formInstance.value.validate()
      const res = await update(props.orderId)
      if (res.code === 20000) {
        HMessage.success('修改成功')
        emits('update')
        hideDialog()
        return
      }
      HMessageBox.error(res.message)
    } catch (error) {
      // error
    }
  }

  /**
   * 建议报废原因选项点击事件
   * @param {Object} option - 报废原因选项
   */
  const handleOptionClick = (option: { label: string; value: string }) => {
    updateForm.value.orderStatusNodeCode = option.value
    updateForm.value.orderStatusNodeName = option.label
  }

  /**
   * 完工类型更新事件
   */
  const handleOrderStatusChange = () => {
    updateForm.value.orderStatusNodeCode = undefined
    updateForm.value.orderStatusNodeName = undefined
  }
</script>

<template>
  <h-dialog v-model="visible" title="修改百事完工类型" :loading="updateLoading" @close="hideDialog">
    <el-form
      ref="formInstance"
      label-position="top"
      inline-message
      class="modal_form_content"
      :rules="rules"
      :model="updateForm"
    >
      <!-- 百事完工类型 -->
      <el-form-item label="百事完工类型" prop="orderStatus">
        <el-select
          v-model="updateForm.orderStatus"
          placeholder="请选择百事完工类型"
          @change="handleOrderStatusChange"
        >
          <el-option v-if="props.hckWbtype === '在店维修单'" :value="1" label="在线完工申请" />
          <el-option :value="2" label="完工申请" />
          <el-option
            v-if="['在库计次维修单', '翻新单', '在库维修单'].includes(props.hckWbtype)"
            :value="3"
            label="销单申请"
          />
          <el-option v-if="props.hckWbtype === '在库维修单'" :value="4" label="建议报废" />
        </el-select>
      </el-form-item>

      <!-- 线上完工类型 -->
      <el-form-item
        v-if="updateForm.orderStatus === 1"
        label="线上完工类型"
        prop="orderStatusNodeCode"
      >
        <el-select v-model="updateForm.orderStatusNodeCode" placeholder="请选择线上完工类型">
          <el-option
            v-for="(item, index) in onLineCompletionTypeOpionts"
            :key="index"
            :value="item.value"
            :label="item.label"
            @click="handleOptionClick(item)"
          />
        </el-select>
      </el-form-item>

      <!-- 销单原因 -->
      <el-form-item v-if="updateForm.orderStatus === 3" label="销单原因" prop="orderStatusNodeCode">
        <el-select v-model="updateForm.orderStatusNodeCode" placeholder="请选择销单原因">
          <el-option
            v-for="(item, index) in reasonOfDestoryOrderOptions"
            :key="index"
            :value="item.value"
            :label="item.label"
            @click="handleOptionClick(item)"
          />
        </el-select>
      </el-form-item>

      <!-- 建议报废原因 -->
      <el-form-item
        v-if="updateForm.orderStatus === 4"
        label="建议报废原因"
        prop="orderStatusNodeCode"
      >
        <el-select v-model="updateForm.orderStatusNodeCode" placeholder="请选择建议报废原因">
          <el-option
            v-for="(item, index) in suggestReasonOfScrapOptions"
            :key="index"
            :value="item.value"
            :label="item.label"
            @click="handleOptionClick(item)"
          />
        </el-select>
      </el-form-item>

      <!-- 备注 -->
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="updateForm.remark"
          type="textarea"
          maxlength="200"
          show-word-limit
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <h-button is-modal type="primary" @click="onSave">保存</h-button>
      <h-button is-modal @click="hideDialog">取消</h-button>
    </template>
  </h-dialog>
</template>

<style scoped lang="scss">
  :deep(.el-textarea__inner) {
    height: 100px;
  }
</style>
